<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>最受欢迎书籍 - 电子书下载平台</title>
</head>
<body>
    <section>
        <div class="container py-5">
            <h2 class="mb-4">最受欢迎书籍</h2>
            
            <!-- 书籍排序与筛选 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <label for="sortOptions" class="me-2">排序:</label>
                        <select id="sortOptions" class="form-select">
                            <option value="popularity" selected>受欢迎度</option>
                            <option value="downloads">下载量</option>
                            <option value="rating">评分</option>
                            <option value="newest">最新上传</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-md-end mt-3 mt-md-0">
                        <div class="btn-group" role="group" aria-label="格式筛选">
                            <button type="button" class="btn btn-outline-primary active" data-format="all">所有格式</button>
                            <button type="button" class="btn btn-outline-primary" data-format="PDF">PDF</button>
                            <button type="button" class="btn btn-outline-primary" data-format="EPUB">EPUB</button>
                            <button type="button" class="btn btn-outline-primary" data-format="MOBI">MOBI</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 书籍卡片展示 -->
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4">
                <!-- 动态数据 -->
                <div class="col" th:each="book : ${popularBooks}">
                    <div class="card h-100 book-card">
                        <div class="position-relative">
                            <img th:src="${book.coverUrl != null ? book.coverUrl : '/img/default-cover.jpg'}" 
                                 class="card-img-top book-cover" alt="书籍封面">
                            <div class="popularity-badge">
                                <span><i class="fas fa-fire"></i> <span th:text="${book.popularityRank}">1</span></span>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title text-truncate">
                                <a th:href="@{'/books/' + ${book.bookId}}" th:text="${book.title}">书籍标题</a>
                            </h5>
                            <p class="card-text mb-1">
                                <small class="text-muted" th:text="${book.author}">作者名</small>
                            </p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <span th:text="${book.rating}">4.5</span>
                                </div>
                                <div>
                                    <span th:each="format : ${book.availableFormats}" class="badge me-1"
                                          th:classappend="${format == 'PDF' ? 'bg-danger' : (format == 'EPUB' ? 'bg-primary' : 'bg-success')}"
                                          th:text="${format}">PDF</span>
                                </div>
                            </div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-download me-1"></i>
                                <span th:text="${book.downloadCount + ' 次下载'}">1200 次下载</span>
                            </div>
                            <div class="mt-auto pt-3">
                                <a th:href="@{'/books/' + ${book.bookId}}" class="btn btn-outline-primary btn-sm w-100">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 静态数据（当没有动态数据时显示） -->
                <div class="col" th:if="${popularBooks == null || #lists.isEmpty(popularBooks)}">
                    <div class="card h-100 book-card">
                        <div class="position-relative">
                            <img src="/img/book1.jpg" class="card-img-top book-cover" alt="书籍封面">
                            <div class="popularity-badge">
                                <span><i class="fas fa-fire"></i> 1</span>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title text-truncate"><a href="/books/1">人工智能导论</a></h5>
                            <p class="card-text mb-1"><small class="text-muted">李智能</small></p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.8</span>
                                </div>
                                <div>
                                    <span class="badge bg-danger me-1">PDF</span>
                                    <span class="badge bg-primary">EPUB</span>
                                </div>
                            </div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-download me-1"></i>
                                <span>3652 次下载</span>
                            </div>
                            <div class="mt-auto pt-3">
                                <a href="/books/1" class="btn btn-outline-primary btn-sm w-100">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col" th:if="${popularBooks == null || #lists.isEmpty(popularBooks)}">
                    <div class="card h-100 book-card">
                        <div class="position-relative">
                            <img src="/img/book2.jpg" class="card-img-top book-cover" alt="书籍封面">
                            <div class="popularity-badge">
                                <span><i class="fas fa-fire"></i> 2</span>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title text-truncate"><a href="/books/2">Python编程：从入门到实践</a></h5>
                            <p class="card-text mb-1"><small class="text-muted">张程序</small></p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.6</span>
                                </div>
                                <div>
                                    <span class="badge bg-danger me-1">PDF</span>
                                    <span class="badge bg-success">MOBI</span>
                                </div>
                            </div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-download me-1"></i>
                                <span>3245 次下载</span>
                            </div>
                            <div class="mt-auto pt-3">
                                <a href="/books/2" class="btn btn-outline-primary btn-sm w-100">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col" th:if="${popularBooks == null || #lists.isEmpty(popularBooks)}">
                    <div class="card h-100 book-card">
                        <div class="position-relative">
                            <img src="/img/book3.jpg" class="card-img-top book-cover" alt="书籍封面">
                            <div class="popularity-badge">
                                <span><i class="fas fa-fire"></i> 3</span>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title text-truncate"><a href="/books/3">数据结构与算法分析</a></h5>
                            <p class="card-text mb-1"><small class="text-muted">王数据</small></p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.5</span>
                                </div>
                                <div>
                                    <span class="badge bg-primary me-1">EPUB</span>
                                </div>
                            </div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-download me-1"></i>
                                <span>2865 次下载</span>
                            </div>
                            <div class="mt-auto pt-3">
                                <a href="/books/3" class="btn btn-outline-primary btn-sm w-100">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col" th:if="${popularBooks == null || #lists.isEmpty(popularBooks)}">
                    <div class="card h-100 book-card">
                        <div class="position-relative">
                            <img src="/img/book4.jpg" class="card-img-top book-cover" alt="书籍封面">
                            <div class="popularity-badge">
                                <span><i class="fas fa-fire"></i> 4</span>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title text-truncate"><a href="/books/4">操作系统概念</a></h5>
                            <p class="card-text mb-1"><small class="text-muted">刘系统</small></p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <span>4.7</span>
                                </div>
                                <div>
                                    <span class="badge bg-danger me-1">PDF</span>
                                </div>
                            </div>
                            <div class="mt-2 text-muted small">
                                <i class="fas fa-download me-1"></i>
                                <span>2548 次下载</span>
                            </div>
                            <div class="mt-auto pt-3">
                                <a href="/books/4" class="btn btn-outline-primary btn-sm w-100">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <nav aria-label="Page navigation" th:if="${totalPages > 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{'/books/popular?page=' + ${currentPage - 1}}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    
                    <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                        th:classappend="${i == currentPage} ? 'active' : ''">
                        <a class="page-link" th:href="@{'/books/popular?page=' + ${i}}" th:text="${i}">1</a>
                    </li>
                    
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{'/books/popular?page=' + ${currentPage + 1}}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 静态分页示例（当没有动态数据时显示） -->
            <nav aria-label="Page navigation" th:if="${totalPages == null || totalPages <= 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <style>
            .book-cover {
                height: 250px;
                object-fit: cover;
            }
            .popularity-badge {
                position: absolute;
                top: 10px;
                right: 10px;
                background-color: rgba(255, 69, 0, 0.85);
                color: white;
                padding: 5px 10px;
                border-radius: 20px;
                font-weight: bold;
            }
            .book-card {
                transition: transform 0.3s ease;
            }
            .book-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
        </style>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 排序选项切换
                const sortSelect = document.getElementById('sortOptions');
                sortSelect.addEventListener('change', function() {
                    // 构建新的URL，保留当前页面的其他参数
                    const currentUrl = new URL(window.location.href);
                    currentUrl.searchParams.set('sort', this.value);
                    currentUrl.searchParams.set('page', '1'); // 切换排序时重置页码
                    window.location.href = currentUrl.toString();
                });
                
                // 格式筛选切换
                const formatButtons = document.querySelectorAll('[data-format]');
                formatButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 移除所有按钮的active类
                        formatButtons.forEach(btn => btn.classList.remove('active'));
                        // 为当前点击的按钮添加active类
                        this.classList.add('active');
                        
                        // 构建新的URL，保留当前页面的其他参数
                        const currentUrl = new URL(window.location.href);
                        const format = this.getAttribute('data-format');
                        if (format === 'all') {
                            currentUrl.searchParams.delete('format');
                        } else {
                            currentUrl.searchParams.set('format', format);
                        }
                        currentUrl.searchParams.set('page', '1'); // 切换筛选时重置页码
                        window.location.href = currentUrl.toString();
                    });
                });
            });
        </script>
    </section>
</body>
</html> 